<template>
    <div class="resource-box flex-align-center-col">
        <div class="resource-content-box flex-center-col">
            <div style="color: grey;opacity: 0.7;margin-bottom: 50px;margin-top: 50px">分享一些常用的网站</div>
<!--            内容盒子-->
            <div class="resource-content">
                <div style="width: 100%;display: flex;flex-wrap: wrap">
                    <!--                资源项-->
                    <div class="resource-item" v-for="(item,index) in obj.resources">
                        <div class="resource-item-image-box">

                            <!--                        图片-->
                            <a :href="item.link" target="_blank">
                                <img :src="item.rImage" alt="暂无图片" :title="item.rName" v-show="item.rImage">
                            </a>

                        </div>
                        <div style="width: 100%;font-size: 14px;color:grey;overflow: hidden;margin-top: 10px">
                            {{item.rDes}}
                        </div>
                        <a :href="item.link" target="_blank"
                           style="text-decoration: none;color: black;font-size: 20px">{{item.rName}}</a>
                    </div>
                </div>

            </div>
            <el-pagination
                    @current-change="pageChange"
                    :current-page="obj.res.currentPage"
                    :page-size="obj.res.pageInfo.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="obj.res.pageInfo.total"
            > </el-pagination>
        </div>

    </div>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import service from "@/assets/js/service";
    import {goTop} from "@/assets/js/utils";
    export default {
        name: "Resource",
        setup(){

            let obj=reactive({
                resources:{},
                res:{
                    currentPage:1,
                    pageInfo:{}
                }
            })

            async function initResources(pageNum){
               const data= await service.getAllResource(pageNum)
                if(data.code===200){
                    obj.resources=data.data.list
                    obj.res.pageInfo=data.data
                }
            }

            let pageChange=(pageNum)=>{

                initResources(pageNum)
                obj.res.currentPage=pageNum
            }

            onMounted(()=>{
               initResources(1)
                goTop()
            })
            return{
                obj,
                pageChange
            }
        }
    }
</script>

<style scoped lang="less">

    .resource-box{
        width:100%;
        height: 100%;
        min-height: 2200px;
        background-image: url("/src/assets/resourceBc.jpg");
        background-size: cover;
        background-repeat: no-repeat;

        .resource-content-box{
            margin-top: 100px;
            width: 70%;
            height: 80%;
            background-color: white;
            opacity: 0.8;
            border-radius: 5px;

            /*装资源项的盒子*/
            .resource-content{
                width: 80%;
                height: 85%;
                /*每一个资源项*/
                .resource-item{
                   width: 20%;
                   height: 250px;
                   margin: 0 40px 0 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    /*装图片的盒子*/
                   .resource-item-image-box{
                       width: 120px;
                       height: 120px;

                       border-radius: 5px;
                       box-shadow: 0 0 2px 0;
                       overflow: hidden;
                       img{
                           width: 100%;
                           height: 100%;
                           object-fit: cover;

                       }
                   }


                }
            }
        }
    }
</style>